.storm--end {
  &__history {
    .box__top {
      margin: -1em 0 0 0;
      &__actions {
        margin: 0;
      }
    }
    &__filter {
      margin: 0;
    }

    &__rounds {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(12em, 1fr));
      align-content: start;
    }

    &__round {
      padding: 0.4em;

      &__meta {
        @extend %flex-between;
      }

      &__result {
        @extend %flex-center-nowrap;

        rating {
          @extend %page-text;

          font-size: 0.9em;
        }
      }

      &__id {
        @extend %page-text;

        visibility: hidden;
      }

      &:hover .storm__history__round__id {
        color: $c-font;
        visibility: visible;
      }
    }

    good,
    bad {
      @extend %flex-center;

      color: white;
      padding: 0 0.5em 0.1em 0.3em;
      margin-right: 1ch;
      font-size: 0.9em;
      opacity: 0.7;

      &::before {
        @extend %data-icon;

        margin-right: 0.2em;
      }
    }

    good {
      background: $c-good;

      &::before {
        content: '';
      }
    }

    bad {
      background: $c-bad;

      &::before {
        content: '';
      }
    }
  }
}
